<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		function ajax(options){
			//存储的是默认值
			var defaults = {
				type:'get',
				url:'',
				data:{},
				header:{
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success:function(){},
				error:function(){}

			};

			//使用options的参数覆盖defaults的参数
			Object.assign(defaults,options);

			//创建ajax对象
			var xhr = new XMLHttpRequest();
			//拼接请求参数的变量
			var params = '';
			//循环用户传递进来的对象格式参数
			for(var attr in defaults.data){
				params += attr + '=' + defaults.data[attr] + '&'
			}
			params = params.substr(0,params.length-1);

			//判断请求方式
			if(defaults.type == 'get'){
				defaults.url = defaults.url + '?' + params;
			};
			
			//配置
			xhr.open(defaults.type,defaults.url);
			//发送请求
			//如果请求方式为post
			if(defaults.type == 'post'){
				//用户希望的向服务器端传递的请求的类型
				var contentType = defaults.header['Content-Type'];
				//设置请求参数格式的类型
				xhr.setRequestHeader('Contnet-Type',contentType);
				if(contentType == 'application/json'){
					xhr.send(JSON.stringify(defaults.data));
				}else{
					xhr.send(params);
				}
			}else{
				xhr.send();
			}
			
			//监听onload事件
			xhr.onload = function () {

				//xhr.getResponseHeader()获取响应头中的数据
				var contentType = xhr.getResponseHeader('Content-Type');

				var responseText = xhr.responseText;

				if(contentType.includes('application/json')){
					//将json字符串转换为json对象
					responseText = JSON.parse(responseText)
				}

				if(xhr.status == 200){
					defaults.success(responseText,xhr);
				}else{
					defaults.error(responseText,xhr);
				}
				
			  }
		}
		ajax({
			type:'post',
			url:'http://localhost:3000/responseData',
			success:function(data,xhr){
				console.log('success');
				console.log(data);
			},
		})

		/*
			请求参数要考虑的问题

				1.请求参数位置的问题

					将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置

					get 放在请求地址的后面

					post 放在send方法中

				2.请求参数格式的问题

					application/x-www-form-urlencoded

						参数名称=参数值&参数名称=参数值

						name=zhangsan&age=20

					application/json

						{name: 'zhangsan', age: 20}

					1.传递对象数据类型对于函数的调用者更加友好
					2.在函数内部对象数据类型转换为字符串数据类型更加方便

		*/
	</script>
</body>
</html>